<template>
  <div class="news-item">
    <div class="content-wapper">
      <div class="title" @click="goDetail(id)"><span>{{ title }}</span></div>
      <div class="summary">{{ summary }}</div>
      <div class="author-info-wapper">
        <img :src="author_avatar" class="author-avatar"/>
        <span class="author-name">{{author_name}}</span>
        <span class="published-at">{{published_at}}</span>
      </div>
    </div>
    <div class="img-wapper" @click="goDetail(id)"><img :src="cover" class="img-avatar" /></div>
  </div>
</template>

<script>
export default {
  name: 'NewsInfo',
  props: {
    id: Number,
    title: String,
    summary: String,
    author_name: String,
    published_at: String,
    author_avatar: String,
    cover: String
  },
  methods: {
    goDetail (id) {
      this.$router.push({ path: '/detail', query: { id: id } }).catch(() => {
        this.$notify({
          title: '警告',
          message: '访问错误',
          type: 'warning'
        })
      })
    }
  }
}
</script>

<style scoped lang="less">
  .baseWidth (@d: 550px) {
    width: @d;
  }

  .news-item {
    width: 750px;
    margin: 5px 0;
    border-bottom: 1px solid #f0f0f0;
    padding: 10px 10px;
    .flex-display(row, space-between);
    align-content: flex-start;

    .content-wapper {
      display: flex;
      flex-direction: column;
      padding: 0 10px;
      .title {
        .baseWidth;
        font-size: 18px;
        font-weight: 700;
        line-height: 1.5;
        margin-bottom: 5px;
        max-height: 55px;
        overflow: hidden;
        cursor:pointer;
      }
      .title span:hover{
        border-bottom: #000000 2px solid;
      }
      .summary {
        .baseWidth;
        font-size: 14px;
        font-weight: 300;
        color: #878787;
        margin-bottom: 5px;
        max-height: 40px;
        overflow: hidden;
      }
      .author-info-wapper{
        .baseWidth;
        max-height: 40px;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.5;
        .flex-display(row, flex-start);
        .author-avatar{
          width: 30px;
          height: 30px;
          border-radius: 15px;
          margin-right: 20px;
        }
        .author-name{
          color: #000000;
          margin-right: 20px;
        }
        .published-at{
          color: #878787;
          margin-right: 20px;
        }
      }
    }
    .img-wapper {
      align-items: center;
      .img-avatar {
        width: 150px;
        cursor:pointer;
      }
    }
  }
</style>
